<template>
    <div ref="chart" style="width:100%;height:100%;">

    </div>
</template>
<script>
export default {
   data() {
      return {
      }
   },
   mounted(){
    this.initChart();
   },
  
   methods:{
    initChart(){
        const myChart = this.$echarts.init(this.$refs.chart);
        const option = {

  title: {
    text: '销量折线图',
    x:'center',
    y:'30px'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads'],
    x:'center',
    y:'10px'

  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    }
  ]
        }
        myChart.setOption(option);
    }
   },
}
</script>
<style scoped>

</style>
